
(function () {
    // 重构
    const dataList = [
        {
            href: "wuzi.html",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_kiriko_088aff2153bdfa426984b1d5c912f6af0ab313f0865a81be0edd114e9a2f79f9.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "雾子"

        },
        {
            href: "https://ow.blizzard.cn/heroes/ana",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_ana_3429c394716364bbef802180e9763d04812757c205e1b4568bc321772096ed86.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "安娜"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/ashe",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_ashe_8dc2a024c9b7d95c7141b2ef065590dbc8d9018d12ad15f76b01923986702228.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "艾什"
        },
        {
            href: "https://ow.blizzard.cn/heroes/baptiste",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_baptiste_f979896f74ba22db2a92a85ae1260124ab0a26665957a624365e0f96e5ac5b5c.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "巴蒂斯特"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/bastion",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_bastion_4d715f722c42215072b5dd0240904aaed7b5285df0b2b082d0a7f1865b5ea992.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "堡垒"
        },
        {
            href: "https://ow.blizzard.cn/heroes/brigitte",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_brigitte_48392820c6976ee1cd8dde13e71df85bf15560083ee5c8658fe7c298095d619a.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "布里吉塔"
        },
        {
            href: "https://ow.blizzard.cn/heroes/cassidy",
            type: "damage",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_cassidy_6cfb48b5597b657c2eafb1277dc5eef4a07eae90c265fcd37ed798189619f0a5.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "卡西迪"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/d.va",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_d.va_ca114f72193e4d58a85c087e9409242f1a31e808cf4058678b8cbf767c2a9a0a.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "D.Va"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/doomfist",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_doomfist_13750471c693c1a360eb19d5ace229c8599a729cd961d72ebee0e157657b7d18.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "末日铁拳"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/echo",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_echo_f086bf235cc6b7f138609594218a8385c8e5f6405a39eceb0deb9afb429619fe.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "回声"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/genji",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_genji_4edf5ea6d58c449a2aeb619a3fda9fff36a069dfbe4da8bc5d8ec1c758ddb8dc.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "源氏"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/hanzo",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_hanzo_aecd8fa677f0093344fab7ccb7c37516c764df3f5ff339a5a845a030a27ba7e0.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "半藏"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/junkerqueen",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_junker queen_1c6a0b942da79de8df3ebcc652fbf239cf74ff3d607e0f35af38570ee3536fd3.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "渣客女王"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/junkrat",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_junkrat_037e3df083624e5480f8996821287479a375f62b470572a22773da0eaf9441d0.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "狂鼠"
        },
        {
            href: "https://ow.blizzard.cn/heroes/lucio",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_lúcio_7fc54a1056e11892e1f5366fc15ad50e0e4b4691dedb58ee25da6ee853f3408e.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "卢西奥"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/mei",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_mei_1533fcb0ee1d3f9586f84b4067c6f63eca3322c1c661f69bfb41cd9e4f4bcc11.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "美"
        },
        {
            href: "https://ow.blizzard.cn/heroes/mercy",

            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_mercy_2508ddd39a178d5f6ae993ab43eeb3e7961e5a54a9507e6ae347381193f28943.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "天使"
        },
        {
            href: "https://ow.blizzard.cn/heroes/moira",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_moira_000beeb5606e01497897fa9210dd3b1e78e1159ebfd8afdc9e989047d7d3d08f.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "莫伊拉"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/orisa",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_orisa_95090aeae38cf8bd4852c024a8eb624b99cfda63f59f162db56ec12a17f4a9de.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "奥丽莎"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/pharah",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_pharah_f8261595eca3e43e3b37cadb8161902cc416e38b7e0caa855f4555001156d814.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "法老之鹰"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/reaper",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_reaper_2edb9af69d987bb503cd31f7013ae693640e692b321a73d175957b9e64394f40.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "死神"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/reinhardt",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_reinhardt_490d2f79f8547d6e364306af60c8184fb8024b8e55809e4cc501126109981a65.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "莱茵哈特"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/roadhog",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_roadhog_72e02e747b66b61fcbc02d35d350770b3ec7cbaabd0a7ca17c0d82743d43a7e8.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "路霸"
        },
        {
            href: "https://ow.blizzard.cn/heroes/sigma",

            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_sigma_cd7a4c0a0df8924afb2c9f6df864ed040f20250440c36ca2eb634acf6609c5e4.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "西格玛"
        },
        {
            href: "https://ow.blizzard.cn/heroes/sojourn",
            type: "damage",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_sojourn_a53bf7ad9d2f33aaf9199a00989f86d4ba1f67c281ba550312c7d96e70fec4ea.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "索杰恩"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/soldier76",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_soldier:%2076_20b4ef00ed05d6dba75df228241ed528df7b6c9556f04c8070bad1e2f89e0ff5.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "士兵：76"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/sombra",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_sombra_bca8532688f01b071806063b9472f1c0f9fc9c7948e6b59e210006e69cec9022.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "黑影"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/symmetra",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_symmetra_7f2024c5387c9d76d944a5db021c2774d1e9d7cbf39e9b6a35b364d38ea250ac.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "秩序之光"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/torbjorn",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_torbj%C3%B6rn_1309ab1add1cc19189a2c8bc7b1471f88efa1073e9705d2397fdb37d45707d01.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "托比昂"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/tracer",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_tracer_a66413200e934da19540afac965cfe8a2de4ada593d9a52d53108bb28e8bbc9c.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "猎空"
        },
        {
            type: "damage",
            href: "https://ow.blizzard.cn/heroes/widowmaker",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_widowmaker_a714f1cb33cc91c6b5b3e89ffe7e325b99e7c89cc8e8feced594f81305147efe.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg",
            span: "黑百合"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/winston",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_winston_054bb916d0737a246b48c6d12c34f01b7ee7e3576a60f50523b44d72ce36a0e9.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "温斯顿"
        },
        {
            type: "tank",
            href: "https://ow.blizzard.cn/heroes/wreckingball",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_wrecking%20ball_5c18e39ce567ee8a84078f775b9f76a2ba891de601c059a3d2b46b61ae4afb42.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "破坏球"
        },
        {
            href: "https://ow.blizzard.cn/heroes/zarya",
            type: "tank",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_zarya_8819ba85823136640d8eba2af6fd7b19d46b9ee8ab192a4e06f396d1e5231f7a.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg",
            span: "查莉亚"
        },
        {
            href: "https://ow.blizzard.cn/heroes/zenyatta",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_zenyatta_71cabc939c577581f66b952f9c70891db779251e8e70f29de3c7bf494edacfe4.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "神雅塔"
        },
    ]

    // 初始化内容
    $(function () {
        render(dataList)
    })

    // 渲染数据
    function render(arr) {
        let str = ''
        // 遍历数组
        arr.forEach(item => {
            const { href, img, heroRole, span } = item
            str += `
            <div class="hero-card">

                        <a href="${href}" target="_blank">
                            <div class="hero-img">
                                <img src="${img}" alt="">
                            </div>
                            <div class="hero-name">
                                <img src="${heroRole}"
                                    alt="" class="hero-role">
                                <span>${span}</span>
                            </div>
                        </a>

                    </div>
            `
        });
        document.querySelector('.hero-list').innerHTML = str
    }

    const imgList = new Array()
  
    
    //筛选点击事件
    var selectAll = document.getElementById("select-all");
    selectAll.onclick = function (e) {
        console.log('筛选全部英雄');
        document.getElementById('All').style.display = "block";
        document.getElementById('Tank').style.display = "none";
        document.getElementById('Damage').style.display = "none";
        document.getElementById('Support').style.display = "none";
        render(dataList)
    }

    //坦克
    var selectTank = document.getElementById("select-tank");
    selectTank.onclick = function (e) {
        console.log('筛选坦克');
        //清空数组
        imgList.length = 0;
        dataList.forEach(item => {
            if ('tank' == item.type) {
                imgList.push(item);

            }
        })

        render(imgList)
        document.getElementById('Tank').style.display = "block";
        document.getElementById('All').style.display = "none";
        document.getElementById('Damage').style.display = "none";
        document.getElementById('Support').style.display = "none";
    }

    //输出
    var selectDamage = document.getElementById("select-damage");
    selectDamage.onclick = function (e) {
        console.log('筛选输出');
        imgList.length = 0;
        dataList.forEach(item => {
            if ('damage' == item.type) {
                imgList.push(item);
            }
        })
        render(imgList)
        document.getElementById('Damage').style.display = "block";
        document.getElementById('All').style.display = "none";
        document.getElementById('Tank').style.display = "none";
        document.getElementById('Support').style.display = "none";


    }

    //支援
    var selectSupport = document.getElementById("select-support");
    selectSupport.onclick = function (e) {
        console.log('筛选辅助');
        imgList.length = 0;
        dataList.forEach(item => {
            if ('support' == item.type) {
                imgList.push(item);
            }
        })
        render(imgList)
        document.getElementById('Support').style.display = "block";
        document.getElementById('All').style.display = "none";
        document.getElementById('Tank').style.display = "none";
        document.getElementById('Damage').style.display = "none";
    }
})();


// (function () {
//     // const data = [
//     //     {

//     //         des: "《守望先锋》的主角是来自世界各地的强大英雄们，他们个性鲜明富有魅力，身世背景引人入胜。以下为完整的英雄阵容。"
//     //     },
//     //     {
//     //         type: "tank",
//     //         des: "重装英雄可以承受大量伤害，还能粉碎森严的防线，不论是抱团的敌人还是狭窄的要道都不在话下。身为重装英雄，领军冲锋由你一马当先。"
//     //     },
//     //     {
//     //         type: "damage",
//     //         des: "输出英雄负责搜寻敌人、全力出击并将其歼灭，本领和技能多样，风格百变。这些英雄的力量令人生畏，但自身较为脆弱，需要支援照应才能生存。"
//     //     },
//     //     {
//     //         type: "support",
//     //         des: "支援英雄可以通过治疗、护盾、伤害增强和封锁敌人来强化盟友。作为支援英雄，你就是团队生存的支柱。"
//     //     }
//     // ]

//     // var selectAll = document.getElementById("select-all");
//     // var selectTank = document.getElementById("select-tank");
//     // var selectDamage = document.getElementById("select-damage");
//     // var selectSupport = document.getElementById("select-support");
//     var filterLtem = document.getElementsByName("div");
//     var description = document.getElementsByName("p");
//     for (var i = 0; i < filterLtem.length; i++) {
//         filterLtem[i].index = i;
//         filterLtem[i].onclick = function () {
//             for (var i = 0; i < filterLtem.length; i++) {
//                 filterLtem[i].className = ""
//                 description[i].style.display = "none"

//             }
//             this.className = "active"
//             description[this.index].style.display = "block"
//         }
//     }

// })();

// (function () {
//     function openP(obj) {
//         var hero = "description"
//         switch (obj.id) {
//             case 'select-all':
//                 hero = 'All'
//                 break;
//             case 'select-tank':
//                 hero = 'Tank'
//                 break;
//             case 'select-damage':
//                 hero = 'Damge'
//                 break;
//             case 'select-support':
//                 hero = 'Support'
//                 break;

//             default:
//                 break;
//         }
//         document.getElementById('All').style.display = "block";
//         document.getElementById('Tank').style.display = "block";
//         document.getElementById('Damge').style.display = "block";
//         document.getElementById('Support').style.display = "block";
//     }
//     openP()
//     function closeP() {
       
//     }
//     closeP()
// })();